import { getCurrentPx } from "@/utils/common"
import styled from "@emotion/styled"
import { useMemo } from "react"
import { motion } from "motion/react"

interface StepCircleFlagProps {
    currentStep: number
    stepsLength: number
    size?: number
    strokeWidth?: number
    color?: string
    backgroundColor?: string
}

const CircleContainer = styled.div<{ size: number }>`
    position: relative;
    width: ${(props) => props.size}px;
    height: ${(props) => props.size}px;
    display: flex;
    align-items: center;
    justify-content: center;
`

const StepNumber = styled.span<{ color: string }>`
    position: absolute;
    z-index: 1;
    color: ${(props) => props.color};
    font-weight: 600;
    font-size: 16rem;
    line-height: 24rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -45%);
`

const Circle = styled(motion.circle)`
    transform-origin: center;
    transform: rotate(-90deg);
`

function StepCircleFlag({
    currentStep,
    stepsLength,
    size: _size = 80,
    strokeWidth: _strokeWidth = 10,
    color = "#ff385c",
    backgroundColor = "#ffc6d0",
}: StepCircleFlagProps) {
    const progress = useMemo(() => {
        // 計算進度百分比 (當前步驟 / 總步驟數) * 100
        const percentage = (currentStep / stepsLength) * 100
        // 確保進度值在 0-100 之間
        return Math.min(Math.max(percentage, 0), 100)
    }, [currentStep, stepsLength])

    const size = getCurrentPx(_size)
    const strokeWidth = getCurrentPx(_strokeWidth)
    const radius = size / 2 - strokeWidth / 2 // 留出邊距
    const circumference = 2 * Math.PI * radius

    return (
        <CircleContainer size={size}>
            <svg
                width={size}
                height={size}
                viewBox={`0 0 ${size} ${size}`}
            >
                {/* 底層背景圓環 */}
                <circle
                    cx={size / 2}
                    cy={size / 2}
                    r={radius}
                    fill="none"
                    stroke={backgroundColor}
                    strokeWidth={strokeWidth}
                />

                {/* 進度圓環 */}
                <Circle
                    cx={size / 2}
                    cy={size / 2}
                    r={radius}
                    fill="none"
                    strokeWidth={strokeWidth}
                    strokeLinecap="round"
                    strokeDasharray={circumference}
                    strokeDashoffset={circumference * (1 - progress / 100)}
                    initial={{ strokeDashoffset: circumference }}
                    animate={{ strokeDashoffset: circumference * (1 - progress / 100) }}
                    transition={{ duration: 0.3, ease: "easeOut" }}
                    style={{
                        stroke: "url(#progressGradient)",
                    }}
                />

                {/* 漸變色定義 */}
                <defs>
                    <linearGradient
                        id="progressGradient"
                        x1="0%"
                        y1="0%"
                        x2="0%"
                        y2="100%"
                    >
                        <stop
                            offset="0%"
                            stopColor={color}
                            stopOpacity="0.8"
                        />
                        <stop
                            offset="100%"
                            stopColor={color}
                            stopOpacity="1"
                        />
                    </linearGradient>
                </defs>
            </svg>
            <StepNumber color={color}>{currentStep}</StepNumber>
        </CircleContainer>
    )
}

export default StepCircleFlag
